<template>
  <div>
    <div class="pos-rlt">
      <a-upload
        name="file"
        :accept="accept"
        :multiple="false"
        :data="param"
        :action="API_URL + '/zg-system/file/upload'"
        @change="handleChange"
        :headers="headers"
        :showUploadList="false"
        :beforeUpload="handleBeforeUpload"
      >
        <a-button type="link" v-if="showBtn">
          <i class="fa fa-upload mr5" />上传图片
        </a-button>
        <div v-else>
          <ZgImgHolder
            v-if="hasImg()"
            :src="imageUrl"
            :width="small?36:width"
            :height="small?36:height"
          />
          <div v-else class="holder" :style="{width:small?`36px`:`${width}px`,height:small?`36px`:`${height}px`}">
            <a-icon :type="loading ? 'loading' : 'plus'" />
          </div>
        </div>
      </a-upload>
      <div class="clear-btn" v-show="hasImg()&&!showBtn" @click="clear" title="删除这张图片">
        <i class="fa fa-times"></i>
      </div>
    </div>
  </div>
</template>

<script>
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  model: {
    prop: 'modelVal', // 指向props的参数名
    event: 'change'// 事件名称
  },
  props: {
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    modelVal: {
      type: String,
      default: ''
    },
    accept: {
      type: String,
      default: '.png,.jpg,.jpeg,.gif'
    },
    size: {
      type: Number,
      default: 10
    },
    small: {
      type: Boolean,
      default: false
    },
    showBtn: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      imageUrl: this.modelVal,
      headers: {},
      param: {
        module: 'default'
      }
    }
  },
  mounted () {
    this.headers[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
  },
  watch: {
    modelVal (newVal) {
      this.imageUrl = newVal
    },
    imageUrl (newVal) {
      this.$emit('change', newVal)
    }
  },
  methods: {
    hasImg () {
      return this.imageUrl && this.imageUrl !== ''
    },
    clear () {
      this.imageUrl = ''
    },
    handleBeforeUpload (file) {
      return file.size / 1024 / 1024 < this.size
    },
    handleChange (info) {
      const status = info.file.status
      if (status === 'uploading') {
        this.loading = true
      } else if (status === 'done') {
        this.loading = false
        const res = info.file.response
        if (res.code !== 1) {
          this.$message.error(res.message)
        } else {
          const json = res.data
          const f = {
            id: json.id,
            name: json.name,
            size: json.size,
            path: json.path
          }
          this.$emit('upload', f)
          this.imageUrl = json.path
        }
      } else if (status === 'error') {
        this.loading = false
        this.$message.error(`${info.file.name} 文件上传失败.`)
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
